<template>
  <div style="height:100%">
    <div class="toptop">
      <div>
        <span>
          <span style="margin-right: 24px;">公司</span>
          <el-select v-model="companyId" placeholder="请选择">
            <el-option v-for="(item, index) in companylist" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </span>
      </div>
      <el-button size="small" class="bottom_all" @click="saveValue()">保存</el-button>
    </div>
    <div class="items">
      <div class="item">
        <div class="item-title">强度等级</div>
        <div class="radio">
          <el-radio-group v-model="lifeId" @change="getValue()">
            <template v-for="(item, index) in lifeList">
              <div :key="index" class="radio-bg">
                <el-radio :label="item.id">{{ item.name }}</el-radio>
              </div>
            </template>
          </el-radio-group>
        </div>
      </div>
      <div class="item-hr"></div>
      <div class="item">
        <div class="item-title">标号寿命预警</div>
        <div class="radio">
          <el-input v-model="hour" placeholder="请输入内容" onkeypress="return(/\d|\./.test(String.fromCharCode(event.keyCode)))" @blur="hour=$regExp.blurCheckNum(hour)" @input="hour=$regExp.checkNum(hour)">
            <template slot="append">小时</template>
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { permissionsCompanyList, getListByTypeId } from "@/api/common.js";
import {
  queryBindingTime,
  save_or_update
} from '@/api/basicConfig/CPYquality.js';
export default {
  data() {
    return {
      companylist: [],
      companyId: "",
      lifeId: '',
      lifeList: [],
      hour: ''
    }
  },
  async created() {
    this.companylist = await permissionsCompanyList()
    console.log(this.companylist);
    const { data: list } = await getListByTypeId({ typeId: 1 })
    this.lifeList = list
    this.companyId = this.companylist[0].id
  },
  methods: {
    getValue() {
      queryBindingTime({ companyId: this.companyId, markNumberId: this.lifeId }).then(res => {
        this.hour = res.data.usefulLife
      })
    },
    /**限制后两位两位小数*/
    handleInput2(e) {
      this.hour = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || null
    },
    saveValue() {
      const params = {
        companyId: this.companyId,
        markNumberId: this.lifeId,
        companyName: this.companylist.find(res => (res.id == this.companyId)).name,
        markNumberName: this.lifeList.find(res => (res.id == this.lifeId)).name,
        usefulLife: this.hour
      }
      save_or_update(params).then(res => {
        if (res.code * 1 === 1001) {
          this.$message.success('保存成功')
          // this.saveValue()
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.toptop {
  padding: 20px 20px 0 20px;
  @include discen_al;
  justify-content: space-between;
}
.items {
  padding: 20px;
  display: flex;
  height: 100%;
}
.item {
  border: 1px solid rgba(225, 229, 237, 1);
  border-radius: 4px;
  width: 360px;
  .item-title {
    color: #000000;
    background: #e1e5ed;
    font-size: 14px;
    @include discen;
    height: 56px;
    font-weight: bold;
  }
}
.item-hr {
  width: 20px;
  height: 20px;
}
.radio {
  padding: 20px;
  height: 600px;
}
.radio {
  padding: 20px;
  .radio-bg {
    height: 28px;
  }
}
</style>